<template>
  <div ref="auditBody">
    <el-card v-if="source">
      <div slot="header">
        {{ source.DocTitle }}
        <el-tag
          :style="{
            marginLeft: '10px',
            color: FlowAuditStatus[source.AuditStatus].color,
          }"
          effect="plain"
        >{{ FlowAuditStatus[source.AuditStatus].text }}</el-tag>
      </div>
      <div :style="{ maxHeight: height, overflowY: 'auto' }">
        <auditForm
          ref="flowForm"
          :form-id="formId"
          :link-pk="linkPk"
          :link-type="linkType"
          :page-type="pageType"
          :fill-data="fillData"
          :power="power"
          :readonly="isReadonly"
          :is-load="isLoad"
          @save="auditPass"
        />
      </div>
    </el-card>
    <el-card v-if="flowStatus !== 0" class="audit">
      <div slot="header">
        <span class="title">审批意见</span>
        <span class="show">{{ source.NodeName }}节点</span>
        <div v-if="flowStatus == 1" class="auditRightBtn">
          <el-button
            v-if="(512 & source.AuditButton) == 512"
            type="danger"
            icon="el-icon-close"
            @click="save(6)"
          >关闭</el-button>
          <el-button
            v-if="(8 & source.AuditButton) == 8"
            type="info"
            icon="el-icon-back"
            @click="save(5)"
          >撤回</el-button>
        </div>
      </div>
      <auditLogList :cur-id="itemId" :is-show-sign="isShowSign" :is-load="flowStatus !==0" :log-id="logId" />
    </el-card>
    <el-card v-else-if="source" class="audit">
      <div slot="header">
        <span class="title">{{ source.NodeName }}</span>
        <el-button type="primary" style="float: right;" @click="showLog">历史审批意见</el-button>
      </div>
      <el-form
        ref="flowAudit"
        label-width="120px"
        :model="audit"
        :rules="rules"
      >
        <el-form-item
          v-if="source.NodeType !=0"
          label="意见"
          prop="AuditOpinion"
        >
          <el-input
            v-model="audit.AuditOpinion"
            maxlength="255"
            type="textarea"
            :autosize="{ minRows: 2 }"
            placeholder="意见"
          />
        </el-form-item>
        <el-form-item v-if="source.IsUpFile" label="相关附件" prop="FileId">
          <fileUpBtn v-model="audit.FileId" file-key="FlowAuditFile" :link-biz-pk="itemId" :multiple="true" :up-filelimit="5" />
        </el-form-item>
        <el-form-item v-if="source.IsUpFileSign" label="对文件签名">
          <el-button type="primary" @click="upFileSign">文件签名</el-button>
        </el-form-item>
        <el-form-item v-if="source.IsSign" label="签名" prop="SignFileId">
          <empSignFile v-model="audit.SignFileId" link-type="FlowAuditSign" :link-pk="itemId" />
        </el-form-item>
      </el-form>
      <div class="auditBtn">
        <el-button
          v-if="pageType === 1"
          type="default"
          @click="saveData"
        >
          <icon icon="save" />
          保存</el-button>
        <el-button
          v-if="(2 & source.AuditButton) == 2"
          type="primary"
          icon="el-icon-check"
          @click="save(0)"
        >通过</el-button>
        <el-button
          v-if="(256 & source.AuditButton) == 256"
          type="primary"
          icon="el-icon-check"
          @click="save(0)"
        >提交</el-button>
        <el-button
          v-if="(512 & source.AuditButton) == 512"
          type="danger"
          icon="el-icon-close"
          @click="save(6)"
        >关闭</el-button>
        <el-button
          v-if="(16 & source.AuditButton) == 16"
          type="success"
          icon="el-icon-check"
          @click="save(4)"
        >终审通过</el-button>
        <el-button
          v-if="(32 & source.AuditButton) == 32"
          type="danger"
          icon="el-icon-close"
          @click="save(1)"
        >拒绝</el-button>
        <el-button
          v-if="(4 & source.AuditButton) == 4"
          type="default"
          icon="el-icon-edit"
          @click="save(3)"
        >打回修改</el-button>
        <el-button
          v-if="(8 & source.AuditButton) == 8"
          type="info"
          icon="el-icon-back"
          @click="save(5)"
        >撤回</el-button>
        <el-button
          v-if="(64 & source.AuditButton) == 64"
          type="info"
          icon="el-icon-back"
          @click="save(2)"
        >退回</el-button>
        <el-dropdown v-if="moreBtn && moreBtn.length > 0" style="margin-left: 10px;" split-button type="primary" @command="save">
          更多
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in moreBtn" :key="item.value" :command="item.value">{{ item.text }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-card>
    <nextAuditEmp
      :item-id="itemId"
      :title="title"
      :visible.sync="visible"
      @save="(res) => submit(0, res)"
    />
    <flowAuditLog
      :log-id="logId"
      :visible.sync="logVisible"
      :is-show-sign="isShowSign"
    />
    <flowBack
      v-if="source"
      :back-node="source.BackNode"
      :visible.sync="backVisible"
      @save="submitBack"
    />
    <auditEmpChiose
      :visible.sync="chioseVisible"
      :btn-name="btnTitle"
      @save="submitNext"
    />
    <pdfSignView :item-id="itemId" :log-id="logId" :visible.sync="signVisible" />
  </div>
</template>

<script>
import * as auditApi from '@/flow/api/flowAudit'
import auditForm from '@/customForm/components/auditForm/auditForm.vue'
import { AuditItemStatus, AuditButton, FlowAuditStatus, AuditMoreBtn } from '@/flow/config/flowConfig'
import nextAuditEmp from './nextAuditEmp.vue'
import flowAuditLog from './flowAuditLog.vue'
import flowBack from './flowBack.vue'
import auditLogList from './auditLogList.vue'
import fileUpBtn from '@/components/fileUp/FileUpBtn.vue'
import auditEmpChiose from './auditEmpChiose.vue'
import empSignFile from '@/components/empFile/empSignFile.vue'
import pdfSignView from './pdfSignView.vue'
export default {
  components: {
    auditForm,
    nextAuditEmp,
    flowAuditLog,
    flowBack,
    auditLogList,
    fileUpBtn,
    empSignFile,
    auditEmpChiose,
    pdfSignView
  },
  props: {
    itemId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      AuditButton,
      AuditItemStatus,
      FlowAuditStatus,
      linkPk: null,
      linkType: null,
      pageType: 0,
      btnId: 0,
      isReadonly: false,
      backVisible: false,
      btnTitle: null,
      chioseVisible: false,
      formId: null,
      logId: null,
      backBatchNo: null,
      title: null,
      fillData: null,
      power: null,
      isSubmit: false,
      flowStatus: 0,
      backNodeId: null,
      source: null,
      isShowSign: false,
      isLoad: false,
      logVisible: false,
      visible: false,
      moreBtn: [],
      signVisible: false,
      rules: {},
      audit: {
        AuditOpinion: null,
        SignFileId: null,
        FileId: null
      },
      height: 'auto'
    }
  },
  computed: {
    user() {
      return this.$store.getters.user
    }
  },
  watch: {
    itemId: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    showEmpChiose(id) {
      this.btnId = id
      this.btnTitle = AuditMoreBtn.find(a => a.value === id).text + '人'
      this.chioseVisible = true
    },
    upFileSign() {
      this.signVisible = true
    },
    submitNext(empId) {
      this.submit(this.btnId, null, empId)
    },
    async reset() {
      const res = await auditApi.Get(this.itemId)
      this.source = res
      this.isShowSign = res.IsShowSign
      this.linkType = res.LinkType
      this.linkPk = res.LinkPk
      this.logId = res.LogId
      this.flowStatus = res.FlowStatus
      this.power = res.ColPower
      this.fillData = res.FormVal
      this.formId = res.FormId
      if (res.FlowStatus !== 0 || res.IsAllowEdit === false) {
        this.pageType = 2
        this.isReadonly = true
        this.moreBtn = []
      } else {
        this.pageType = 1
        this.isReadonly = false
      }
      this.initMoreBtn()
      this.isLoad = true
      this.$nextTick(this.initBody)
      this.audit.AuditOpinion = res.AuditOpinion
      this.audit.SignFileId = res.SignFileId
      this.audit.FileId = []
      if (res.OpinionMust) {
        this.rules['AuditOpinion'] = [
          {
            required: true,
            message: '意见不能为空',
            trigger: 'blur'
          }
        ]
      } else {
        this.rules['AuditOpinion'] = []
      }
      if (res.IsSign) {
        this.rules['SignFileId'] = [
          {
            required: true,
            message: '签名文件不能为空',
            trigger: 'blur'
          }
        ]
      }
    },
    initMoreBtn() {
      this.moreBtn = AuditMoreBtn.filter(a => (a.btn & this.source.AuditButton) === a.btn)
    },
    showLog() {
      this.logVisible = true
    },
    saveData() {
      this.isSubmit = false
      this.$refs.flowForm.save()
    },
    initBody() {
      const rect = this.$refs.auditBody.getBoundingClientRect()
      const height = window.innerHeight - rect.top - 340
      this.height = height + 'px'
    },
    saveForm() {
      this.isSubmit = true
      if (this.pageType === 1) {
        this.$refs.flowForm.save()
      } else {
        this.auditPass()
      }
    },
    save(res) {
      if (this.flowStatus !== 0) {
        this.submit(res, null)
      } else {
        this.$refs['flowAudit'].validate((valid) => {
          if (valid) {
            if (res === 0) {
              this.saveForm()
            } else if (res === 2) {
              this.backVisible = true
            } else if (res >= 7 && res <= 10) {
              this.showEmpChiose(res)
            } else {
              this.submit(res, null)
            }
          } else {
            return false
          }
        })
      }
    },
    auditPass() {
      if (this.isSubmit) {
        this.title = this.source.NodeName + '审核通过选择下一步审核人'
        this.visible = true
      } else {
        this.$message({
          type: 'success',
          message: '保存成功!'
        })
      }
    },
    submitBack(item) {
      this.backNodeId = item.Id
      this.backBatchNo = item.BatchNo
      this.submit(2, null)
    },
    async submit(res, next, empId) {
      const data = {
        AuditResult: res,
        Opinion: this.audit.AuditOpinion,
        ItemId: this.itemId,
        BackNodeId: this.backNodeId,
        BackBatchNo: this.backBatchNo,
        FileId: this.audit.FileId,
        ToEmpId: empId,
        SignFileId: this.audit.SignFileId
      }
      if (res === 0 && next != null) {
        data.Restore = next.Restore
        data.NextNode = next.NextNode
      } else if (res === 10) {
        data.AuditResult = 9
        data.IsBefore = false
      } else if (res === 9) {
        data.IsBefore = true
      }
      const status = await auditApi.Submit(this.source.LogId, data)
      this.source.Status = status
      this.isReadonly = status !== 0
      this.pageType = 2
      this.$message({
        type: 'success',
        message: '处理成功!'
      })
      this.reset()
    }
  }
}
</script>
<style scoped>
.audit {
  margin-top: 10px;
  min-height: 150px;
}
.audit .auditBtn {
  text-align: center;
}
.audit .auditRightBtn {
  float: right;
}
.audit .title {
  font-weight: 500;
  font-size: 18px;
}
.audit .show {
  margin-left: 10px;
  color: #afafaf;
  font-size: 14px;
}
</style>
